<template>
  <div class="box-border w-full h-full px-4">
    <div class="rounded-md border_blue !border-blue-500 w-32 flex items-center justify-center px-2">
      输量与油温调节
    </div>
    <div class="w-full mt-2 text-base">
      <div>
        <div class="flex items-center font-bold">
          <el-checkbox v-model="wb_flowTemp_lineChecked" class="mr-2">乌百线</el-checkbox>
        </div>
        <div v-show="wb_flowTemp_lineChecked" class="w-full text-base">
          <div
            class="mt-4 w-[400px] h-[150px] rounded-lg shadow flex flex-col gap-2 py-4 px-8 box-border"
          >
            <div class="flex items-center w-full">
              <span class="w-[80px] text-right">调节时间</span>
              <el-input v-model="wb_adjustmentTime" class="!w-[160px] ml-6" />
              <span class="ml-2">小时</span>
            </div>
            <div class="flex items-center w-full">
              <span class="w-[80px] text-right">调节后输量</span>
              <el-input v-model="wb_adjustmentFlow" class="!w-[160px] ml-6" />
              <span class="ml-2">m³/h</span>
            </div>
            <div class="flex items-center w-full">
              <span class="w-[80px] text-right">调节后油温</span>
              <el-input v-model="wb_adjustmentTemperature" class="!w-[160px] ml-6" />
              <span class="ml-2">℃</span>
            </div>
          </div>
        </div>
      </div>
      <div>
        <div class="flex items-center mt-4 font-bold">
          <el-checkbox v-model="bk_flowTemp_lineChecked" class="mr-2">百克线</el-checkbox>
        </div>
        <div v-show="bk_flowTemp_lineChecked" class="w-full mt-2 text-base bg-white">
          <div class="relative">
            <!-- <div class="absolute -top-10 right-0 h-[50px]">
              <el-button type="primary" size="small" :icon="Plus" @click="addOilItem"
                >新增</el-button
              >
            </div> -->
            <div class="flex h-[50px]">
              <div
                class="box-border flex items-center justify-center flex-1 text-center border bg_table_header"
              >
                油品种类
              </div>
              <div
                class="box-border flex justify-center items-center text-center w-[82px] topBorder bottomBorder rightBorder bg_table_header"
              >
                调节时间(h)
              </div>
              <div
                class="box-border flex justify-center items-center text-center w-[82px] topBorder bottomBorder rightBorder bg_table_header"
              >
                调节后输量(m³/h)
              </div>
              <div
                class="box-border flex justify-center items-center text-center w-[82px] topBorder bottomBorder rightBorder bg_table_header"
              >
                调节后油温(℃)
              </div>
              <!-- <div
                class="box-border flex justify-center items-center text-center w-[70px] topBorder bottomBorder rightBorder bg_table_header"
              >
                操作
              </div> -->
            </div>
            <div class="flex h-[40px]">
              <div class="flex items-center flex-1 px-5 bottomBorder rightBorder leftBorder2">
                <div class="no-style-input w-full !text-base flex items-center justify-center">
                  {{ bk_oilTypeName1 }}
                </div>
                <!-- <el-select v-model="bk_oilTypeName1" placeholder="请选择油品种类">
                  <el-option
                    v-for="oil in oilList"
                    :key="oil.id"
                    :label="oil.chinese_name"
                    :value="oil.oils_name"
                  />
                </el-select> -->
              </div>
              <div class="box-border flex items-center px-5 w-[82px] rightBorder bottomBorder">
                <el-input v-model="bk_adjustmentTime1" class="no-style-input !text-base" />
              </div>
              <div class="box-border flex items-center px-5 w-[82px] rightBorder bottomBorder">
                <el-input v-model="bk_adjustmentFlow1" class="no-style-input !text-base" />
              </div>
              <div class="box-border flex items-center px-5 w-[82px] rightBorder bottomBorder">
                <el-input v-model="bk_adjustmentTemperature1" class="no-style-input !text-base" />
              </div>
              <!-- <div
                class="box-border flex items-center justify-center w-[70px] rightBorder bottomBorder"
              >
                <el-button type="danger" size="small" :icon="Delete" @click="removeOilItem(index)"
                  >删除</el-button
                >
              </div> -->
            </div>
            <div class="flex h-[40px]">
              <div class="flex items-center flex-1 px-5 bottomBorder rightBorder leftBorder2">
                <div class="no-style-input w-full !text-base flex items-center justify-center">
                  {{ bk_oilTypeName2 }}
                </div>
                <!-- <el-select v-model="bk_oilType2" placeholder="请选择油品种类">
                  <el-option
                    v-for="oil in oilList"
                    :key="oil.id"
                    :label="oil.chinese_name"
                    :value="oil.oils_name"
                  />
                </el-select> -->
              </div>
              <div class="box-border flex items-center px-5 w-[82px] rightBorder bottomBorder">
                <el-input v-model="bk_adjustmentTime2" class="no-style-input !text-base" />
              </div>
              <div class="box-border flex items-center px-5 w-[82px] rightBorder bottomBorder">
                <el-input v-model="bk_adjustmentFlow2" class="no-style-input !text-base" />
              </div>
              <div class="box-border flex items-center px-5 w-[82px] rightBorder bottomBorder">
                <el-input v-model="bk_adjustmentTemperature2" class="no-style-input !text-base" />
              </div>
              <!-- <div
                class="box-border flex items-center justify-center w-[70px] rightBorder bottomBorder"
              >
                <el-button type="danger" size="small" :icon="Delete" @click="removeOilItem(index)"
                  >删除</el-button
                >
              </div> -->
            </div>
          </div>
        </div>
      </div>
      <div>
        <div class="flex items-center mt-4 font-bold">
          <el-checkbox v-model="new81_flowTemp_lineChecked" class="mr-2">新81线</el-checkbox>
        </div>
        <div v-show="new81_flowTemp_lineChecked" class="w-full text-base">
          <div
            class="mt-4 w-[400px] h-[150px] rounded-lg shadow flex flex-col gap-2 py-4 px-8 box-border"
          >
            <div class="flex items-center w-full">
              <span class="w-[80px] text-right">调节时间</span>
              <el-input v-model="new81_adjustmentTime" class="!w-[160px] ml-6" />
              <span class="ml-2">小时</span>
            </div>
            <div class="flex items-center w-full">
              <span class="w-[80px] text-right">调节后输量</span>
              <el-input v-model="new81_adjustmentFlow" class="!w-[160px] ml-6" />
              <span class="ml-2">m³/h</span>
            </div>
            <div class="flex items-center w-full">
              <span class="w-[80px] text-right">调节后油温</span>
              <el-input v-model="new81_adjustmentTemperature" class="!w-[160px] ml-6" />
              <span class="ml-2">℃</span>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, computed } from 'vue'
import { ElMessage } from 'element-plus'
import { Plus, Delete } from '@element-plus/icons-vue'

const props = defineProps({
  oilList: { type: Array }
})
const bk_oilType1 = defineModel('wb_inputOilType')
const bk_oilTypeName1 = computed(
  () => props.oilList.find((item) => item.oils_name === bk_oilType1.value).chinese_name
)
const bk_adjustmentTime1 = ref('2')
const bk_adjustmentFlow1 = ref('150')
const bk_adjustmentTemperature1 = ref('60')
const bk_oilType2 = defineModel('bk_oilType')
const bk_oilTypeName2 = computed(
  () => props.oilList.find((item) => item.oils_name === bk_oilType2.value).chinese_name
)
const bk_adjustmentTime2 = ref('2')
const bk_adjustmentFlow2 = ref('150')
const bk_adjustmentTemperature2 = ref('60')

// 响应式数据
const wb_flowTemp_lineChecked = ref(false)
const bk_flowTemp_lineChecked = ref(false)
const new81_flowTemp_lineChecked = ref(false)

const wb_adjustmentTime = ref('2')
const wb_adjustmentFlow = ref('150')
const wb_adjustmentTemperature = ref('60')

const new81_adjustmentTime = ref('5')
const new81_adjustmentFlow = ref('350')
const new81_adjustmentTemperature = ref('55')

const bkOilList = ref([
  {
    oilType: 'WEHY',
    adjustmentTime: '6',
    adjustmentFlow: '100',
    adjustmentTemperature: '50'
  }
])

// const addOilItem = () => {
//   if (bkOilList.value.length < 2) {
//     bkOilList.value.push({
//       oilType: 'WEHY',
//       adjustmentTime: '6',
//       adjustmentFlow: '100',
//       adjustmentTemperature: '50'
//     })
//   }
// }

// const removeOilItem = (index) => {
//   if (bkOilList.value.length > 1) {
//     bkOilList.value.splice(index, 1)
//   }
// }

/**
 * 校验输量与油温调节设置
 * @returns {boolean} 校验是否通过
 */
const validateSettings = () => {
  if (
    !wb_flowTemp_lineChecked.value &&
    !bk_flowTemp_lineChecked.value &&
    !new81_flowTemp_lineChecked.value
  ) {
    ElMessage.error('至少选择一条管线')
    return false
  }
  // 乌百线校验
  if (wb_flowTemp_lineChecked.value) {
    const wbFields = [
      { value: wb_adjustmentTime.value, name: '乌百线调节时间' },
      { value: wb_adjustmentFlow.value, name: '乌百线调节后输量' },
      { value: wb_adjustmentTemperature.value, name: '乌百线调节后油温' }
    ]
    for (const field of wbFields) {
      if (!field.value) {
        ElMessage.error(`${field.name}不能为空`)
        return false
      }
    }
  }

  // 百克线校验
  if (bk_flowTemp_lineChecked.value) {
    if (!bkOilList.value || bkOilList.value.length === 0) {
      ElMessage.error('百克线至少需要添加一个油品配置')
      return false
    }

    for (let i = 0; i < bkOilList.value.length; i++) {
      const item = bkOilList.value[i]
      const bkFields = [
        { value: item.oilType, name: `百克线第${i + 1}个油品种类` },
        { value: item.adjustmentTime, name: `百克线第${i + 1}个调节时间` },
        { value: item.adjustmentFlow, name: `百克线第${i + 1}个调节后输量` },
        { value: item.adjustmentTemperature, name: `百克线第${i + 1}个调节后油温` }
      ]
      for (const field of bkFields) {
        if (!field.value) {
          ElMessage.error(`${field.name}不能为空`)
          return false
        }
      }
    }
  }

  // 新81线校验
  if (new81_flowTemp_lineChecked.value) {
    const new81Fields = [
      { value: new81_adjustmentTime.value, name: '新81线调节时间' },
      { value: new81_adjustmentFlow.value, name: '新81线调节后输量' },
      { value: new81_adjustmentTemperature.value, name: '新81线调节后油温' }
    ]
    for (const field of new81Fields) {
      if (!field.value) {
        ElMessage.error(`${field.name}不能为空`)
        return false
      }
    }
  }

  return true
}

const isFormValid = computed(() => {
  if (
    !wb_flowTemp_lineChecked.value &&
    !bk_flowTemp_lineChecked.value &&
    !new81_flowTemp_lineChecked.value
  ) {
    return false
  }
  // 乌百线校验
  if (wb_flowTemp_lineChecked.value) {
    if (!wb_adjustmentTime.value || !wb_adjustmentFlow.value || !wb_adjustmentTemperature.value) {
      return false
    }
  }

  // 百克线校验
  if (bk_flowTemp_lineChecked.value) {
    if (!bkOilList.value || bkOilList.value.length === 0) {
      return false
    }

    for (const item of bkOilList.value) {
      if (
        !item.oilType ||
        !item.adjustmentTime ||
        !item.adjustmentFlow ||
        !item.adjustmentTemperature
      ) {
        return false
      }
    }
  }

  // 新81线校验
  if (new81_flowTemp_lineChecked.value) {
    if (
      !new81_adjustmentTime.value ||
      !new81_adjustmentFlow.value ||
      !new81_adjustmentTemperature.value
    ) {
      return false
    }
  }

  return true
})

const getParamsData = () => {
  const params = {
    WBX: wb_flowTemp_lineChecked.value ? '1' : '0',
    BKX: bk_flowTemp_lineChecked.value ? '1' : '0',
    81: new81_flowTemp_lineChecked.value ? '1' : '0',
    TIME_TJ_1: wb_adjustmentTime.value,
    Q_TJ_1: wb_adjustmentFlow.value,
    TEM_TJ_1: wb_adjustmentTemperature.value,
    TIME_TJ_2: bkOilList.value[0].adjustmentTime,
    Q_TJ_2: bkOilList.value[0].adjustmentFlow,
    TEM_TJ_2: bkOilList.value[0].adjustmentTemperature,
    TIME_TJ_4: new81_adjustmentTime.value,
    Q_TJ_4: new81_adjustmentFlow.value,
    TEM_TJ_4: new81_adjustmentTemperature.value
  }

  if (bkOilList.value && bkOilList.value[1]) {
    params.TIME_TJ_3 = bkOilList.value[1].adjustmentTime
    params.Q_TJ_3 = bkOilList.value[1].adjustmentFlow
    params.TEM_TJ_3 = bkOilList.value[1].adjustmentTemperature
  }
  return params
}

// 暴露给父组件的方法和数据
defineExpose({
  validateSettings,
  isFormValid,
  getParamsData
})
</script>

<style lang="scss" scoped>
.leftBorder {
  border-left: 1px dashed black;
  border-image: repeating-linear-gradient(
      to bottom,
      black 0,
      black 8px,
      transparent 8px,
      transparent 16px
    )
    1;
}
.border {
  border: 1px solid black;
}
.rightBorder {
  border-right: 1px solid black;
}
.bottomBorder {
  border-bottom: 1px solid black;
}
.topBorder {
  border-top: 1px solid black;
}
.leftBorder2 {
  border-left: 1px solid black;
}

.bottomDashBorder {
  border-bottom: 1px dashed rgba(53, 63, 64, 0.4);
  border-image: repeating-linear-gradient(
      to right,
      rgba(53, 63, 64, 0.4) 0,
      rgba(53, 63, 64, 0.4) 8px,
      transparent 8px,
      transparent 16px
    )
    1;
}

.shadow {
  box-shadow: 3px 3px 11px 0px rgba(0, 0, 0, 0.15);
}
:deep(.no-style-input) {
  .el-input__wrapper {
    background: none;
    box-shadow: none;
    padding: 0;
  }

  .el-input__inner {
    border: none;
    background: none;
  }
}

.line {
  background: linear-gradient(
    to right,
    rgba(53, 63, 64, 0),
    rgba(53, 63, 64, 1),
    rgba(53, 63, 64, 0)
  );
}

@keyframes rotate {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

.bg_detail {
  border: 1px solid rgba(255, 255, 255, 0.3) !important;
}

.bg_table_header {
  // background-color: rgba(247, 247, 247, 1);
}

.custom-button {
  background-color: rgba(69, 122, 178, 0.18);
  background-size: 100% 100%;
  background-repeat: no-repeat;
  border: 1px solid rgba(69, 122, 178, 1);
  border-radius: 6px;
  color: rgba(69, 122, 178, 0.8);
  width: 140px;
  height: 40px;

  cursor: pointer;
  &:hover {
    background-color: rgba(69, 122, 178, 1);
    border: 1px solid rgba(69, 122, 178, 1);
    color: white;
    background-size: 100% 100%;
    background-repeat: no-repeat;
    border-radius: 6px;
  }
}

.custom-button-not-active {
  cursor: not-allowed;
  background-color: rgba(128, 128, 128, 0.58);
  background-size: 100% 100%;
  background-repeat: no-repeat;
  border: 1px solid gray;
  border-radius: 6px;
  color: white;
  width: 140px;
  height: 40px;
  &:hover {
    background-color: gray;
    border: 1px solid gray;
    color: white;
    background-size: 100% 100%;
    background-repeat: no-repeat;
    border-radius: 6px;
  }
}

.border_blue {
  border: 2px solid rgba(69, 122, 178, 1);
}
</style>
